<template>
  <div>
    <el-dialog
      title="分配角色"
      :visible="showroledialog"
      @close="closedialogfn"
      @open="opendialogfn"
    >
      <template>
        <el-checkbox-group v-model="checkList" v-loading="isloading">
          <el-checkbox
            :label="item.id"
            v-for="item in rolelist"
            :key="item.id"
            >{{ item.name }}</el-checkbox
          >
        </el-checkbox-group>
      </template>

      <template #footer>
        <el-button type="primary" size="small" @click="sumbitfn">
          确定</el-button
        >
        <el-button size="small" @click="closedialogfn">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { rolelistaopi } from '@/api/setting'
import { getSysUserInfoApi } from '@/api/user'
import { assignrolesapi } from '@/api/employes'
export default {
  data() {
    return {
      checkList: [],
      rolelist: [],
      isloading: false
    }
  },
  props: {
    showroledialog: {
      type: Boolean,
      default: false
    },
    userid: {
      type: String
    }
  },
  async created() {},
  methods: {
    closedialogfn() {
      this.$emit('update:showroledialog', false)
      this.checkList = []
    },
    // 打开碳层时所触发的方法
    async opendialogfn() {
      this.isloading = true
      Promise.all([this.getrolelistfn(), this.getuserinfofn()]).then(() => {
        this.isloading = false
      })
    },
    // 获取角色列表
    async getrolelistfn() {
      const res = await rolelistaopi(1, 1000)
      this.rolelist = res.data.rows
    },
    // 获取员工详情juese
    async getuserinfofn() {
      const resa = await getSysUserInfoApi(this.userid)
      this.checkList = resa.data.roleIds
    },
    async sumbitfn() {
      await assignrolesapi(this.userid, this.checkList)
      this.$message.success('分配角色成功')
      this.closedialogfn()
    }
  }
}
</script>

<style></style>
